<template>
	<view>
		<view class="my-person">
			<view class="my-person-avatar">
				<up-avatar :src="src" size="66" @click="handleImage"></up-avatar>
			</view>
			<view class="my-person-name">
				{{name}}
			</view>
			<view class="my-person-tip" @click="changeUserName">
				<up-icon name="edit-pen" color="#fff" size="24"></up-icon>
			</view>
		</view>

		<up-cell-group :custom-style="customeStyles">
			<up-cell icon="" title="登录手机号" :value="phone"></up-cell>
			<up-cell icon="" title="修改密码" :is-link="true" @click="changePwd"></up-cell>
		</up-cell-group>
		<up-cell-group :custom-style="customeStyles">
			<up-cell icon="" title="性别">
				<template #value>
					<view class="">
						<picker mode="selector" :value="index" :range="genders" @change="handleGenderChange">
							<view style="display: flex; align-items: baseline;">
								{{genders[index]}}
								<up-icon name="arrow-right" size="28rpx"></up-icon>
							</view>
						</picker>
					</view>
				</template>
			</up-cell>
		</up-cell-group>

		<view class="" style="padding: 40rpx;">
			<up-button type="error" shape="circle" text="退出当前账号" @click="quit"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	import mineApi from "../../../api/mine";
	import md5 from 'js-md5'
	const idnName = "http://rke.xjznpt.cn/"
	const src = ref('')
	const app = ref({});
	const name = ref("用户名");
	const phone = ref("")
	const show = ref(false)
	const genders = reactive(["保密", "女", "男"]);
	const index = ref(0);
	const customeStyles = {
		backgroundColor: "#fff",
		marginTop: "40rpx"
	}
	onMounted(() => {
		app.value = JSON.parse(uni.getStorageSync("app"));
		name.value = app.value.nickName;
		src.value = app.value.headImage ? idnName + app.value.headImage : "";
		phone.value = app.value.mobile;
		index.value = app.value.gender;
	});
	onShow(() => {
		console.log(111);
		app.value = JSON.parse(uni.getStorageSync("app"));
		name.value = app.value.nickName;
		src.value = app.value.headImage ? idnName + app.value.headImage : "";
		phone.value = app.value.mobile;
		index.value = app.value.gender;
	})
	const handleGenderChange = async (e) => {
		console.log(e.detail.value)
		index.value = e.detail.value;
		let sex = e.detail.value + ""
		const res = await mineApi.updateUser({
			app: 4,
			m: app.value.account,
			sex,
			pwd: "",
			oldPwd: "",
			// n: null
		});
		if (res.msg === "成功") {
			app.value.gender = sex;
			uni.showToast({
				icon: 'none',
				title: "修改成功"
			});
			uni.setStorageSync("app", JSON.stringify(app.value));
		}
	}

	const quit = () => {
		uni.clearStorageSync();
		uni.reLaunch({
			url: "/pages/login/login"
		})
	}
	const changeUserName = () => {
		uni.navigateTo({
			url: "./user-name"
		})
	}
	const changePwd = () => {
		uni.navigateTo({
			url: "./pwd"
		})
	}


	const handleImage = async () => {
		uni.chooseImage({
			count: 1,
			success: function(res) {
				console.log(res);
				uni.uploadFile({
					url: mineApi.uploadImage(),
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						"Authorization": uni.getStorageSync("token")
					},
					formData: {
						m: app.value.account,
						type: 1
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
						let result = JSON.parse(uploadFileRes.data);
						if (result.State) {
							addFace(result.Data)
						} else {
							uni.showModal({
								showCancel: false,
								content: res.Msg || "上传异常，请稍后再试！"
							})
						}
					}
				});
			}
		})
	}

	const addFace = async (image) => {
		const reqObj = {
			app: 4,
			m: app.value.account,
			headUrl: image,
			sex: "",
			n: "",
			pwd: "",
			oldPwd: ""
		}
		const res = await mineApi.updateUser(reqObj);
		if (res.msg == "成功") {
			src.value = idnName + image;
			uni.showToast({
				icon: 'none',
				title: "头像上传成功"
			});
			app.value.headImage = image;
			uni.setStorageSync("app", JSON.stringify(app.value));
		} else {
			uni.showModal({
				showCancel: false,
				content: res.Msg || "上传异常，请稍后再试！"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.my-person {
		background: linear-gradient(to right, #ff8b8b, #ffb685);
		color: #fff;
		display: flex;
		align-items: center;
		padding: 40rpx;

		.my-person-name {
			flex: 1;
			margin-left: 20rpx;
		}
	}
</style>